<template>
  <div class="content">
    <div>
      <el-button size="mini" @click="getMaterialList">{{ $t('btn.reload') }}</el-button>
      <el-button type="primary" size="mini" @click="handleExport">  <!--导出Excel-->{{ $t('btn.toExcel') }}
      </el-button>
    </div>
    <div class="header">
      <div class="header-name">
        <search
          :options="selectData"
          :msg="tacitly"
          @seek="collect"
          @hand="searchMaterialList"
        />
        <el-button
          type="primary"
          size="mini"
          class="btn"
          @click="searchMaterialList"
        >
          <!--搜索-->{{ $t('btn.search') }}
        </el-button>
      </div>
    </div>
    <div class="mainPage">
      <div class="right-mainPage">
        <jc-table
          :table-header="materialTableHeader"
          :table-data="materialTableData"
          :table-height="tableHeight"
          serial
          @selectionChange="selectionData"
        >
          <el-table-column
            type="selection"
            width="30px"
            sortable="true"
            align="center"
          />
          <!--  图片 -->
          <el-table-column
            :label="$t('shop.image')"
            prop="img"
            align="center"
            min-width="80"
          >
            <template slot-scope="scope">
              <el-image
                class="productImg"
                :src="$img + scope.row.fimg"
                :preview-src-list="scope.row.srcList"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </template>
          </el-table-column>
          <!--巡航图片-->
          <el-table-column
            :label="$t('shop.imageFor')"
            prop="img"
            align="center"
            min-width="200"
          >
            <template slot-scope="scope">
              <el-image
                class="productImg"
                :src="scope.row.fworkImg"
                :preview-src-list="scope.row.srcList"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
              <el-image
                class="productImg"
                :src="scope.row.fworkImg1"
                :preview-src-list="scope.row.srcList"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
              <el-image
                class="productImg"
                :src="scope.row.fworkImg2"
                :preview-src-list="scope.row.srcList"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
              <el-image
                class="productImg"
                :src="scope.row.fworkImg3"
                :preview-src-list="scope.row.srcList"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </template>
          </el-table-column>
          <template v-slot:billSlot="col">
            <el-link
              type="primary"
              @click="
                jumpMateriel(col.scope.row.fnumber, col.scope.row.fisdefault)
              "
            >
              {{ col.scope.row.fnumber }}
            </el-link>
          </template>
          <template v-slot:btnSlot="col">
            <el-button type="primary" size="mini" @click="winOpen(col.scope.row.fnumber)"><!--获取二维码-->{{ $t('shop.code') }}</el-button>
          </template>
        </jc-table>
        <div class="footer">
          <jc-pagination
            v-show="total > 0"
            :total="total"
            :page.sync="pagination.pageNum"
            :limit.sync="pagination.pageSize"
            @pagination="getMaterialList"
          />
        </div>
      </div>
    </div>
    <!-- 入库成本维护 -->
    <el-dialog
      v-dialogDrag
      title="二维码"
      model
      :visible.sync="isqrcodeDialog"
      :close-on-click-modal="false"
      width="600px"
      center
    >
      <img :src="QRImgUrl">
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcode'
import {
  queryTBdMaterialList
} from '@/api/basicManagement/materielList'
import { toMxAmina, Disable } from '@/components/ToMxamineState'
import search from '@/components/Search'
import searData from '@/components/Search/mixin'
import { export_json_to_excel, formatJson } from '@/utils/Export2Excel'

export default {
  name: 'ProductList',
  components: {
    search
  },
  mixins: [searData],
  data() {
    return {
      QRImgUrl: '',
      isqrcodeDialog: false,
      ftype: 0,
      fbillNo: 'fnumber', // 产品描述
      pagination: {
        pageNum: 1, // 当前页
        pageSize: 50 // 每页显示多少条数据
      },
      delArr: [],
      total: 0, // 总条目
      materialTableHeader: [
        { label: this.$t('shop.model'), prop: 'fmodel' },
        {
          label: this.$t('shop.fnumber1'),
          prop: 'fnumber',
          type: 'bill',
          minWidth: '110'
        },
        { label: this.$t('shop.fname2'), prop: 'fname', minWidth: '120' },
        {
          label: this.$t('shop.fspecificaTion'),
          prop: 'fspecificaTion'
        },
        {
          label: this.$t('shop.fdescripTion'),
          prop: 'fdescripTion',
          minWidth: '200px'
        },
        { label: this.$t('shop.unit'), prop: 'funit', width: '80' },
        { label: this.$t('market.handle'), type: 'btn' }
      ], // 表头数据
      materialTableData: [], // 表格数据
      tableHeight: '73vh',
      tableHeader1: []
    }
  },
  created() {
    this.getMaterialList()
    this.tableHeader1 = this.materialTableHeader
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 220px)' : '73vh'
  },
  methods: {
    // 导出表格
    handleExport() {
      require.ensure([], () => {
        const tHeader = this.materialTableHeader.map(res => {
          return res.label
        })
        const filterVal = this.materialTableHeader.map(res => {
          return res.prop
        })
        if (this.materialTableData.length <= 0) {
          this.$message.warning('没有导出数据')
        } else if (this.val && this.val.length > 0) {
          const list = this.val.map(item => {
            return (toMxAmina(item), Disable(item))
          })
          const data = formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '物料列表')
        } else {
          queryTBdMaterialList({
            pageSize: 100000,
            pageNum: this.pagination.pageNum,
            search: this.searCollData
          }).then(res => {
            if (res.code === 0) {
              const list = res.data.array.map(item => {
                return (toMxAmina(item), Disable(item))
              })
              const data = formatJson(filterVal, list)
              export_json_to_excel(tHeader, data, '物料列表')
            } else {
              this.$confirm(res.message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 进入物料主数据
    jumpMateriel(FNUMBER) {
      this.$router.push({ path: `/uploadProduct/${FNUMBER}` })
    },
    // 获取二维码
    winOpen(item) {
      this.isqrcodeDialog = true
      const fnumber = 'http://14.29.79.10:8808/jc/image/common/qihua.html?' + item
      QRCode.toDataURL(fnumber, { margin: 2, width: 200, height: 200 }, (err, url) => {
        if (err) throw err
        // 将生成的二维码路径复制给data的QRImgUrl
        this.QRImgUrl = url
      })
    },
    // 搜索物料
    searchMaterialList(ev) {
      this.pagination.pageNum = 1
      if (ev && ev.fname) {
        this.customHandle(ev)
        this.getMaterialList(ev.detail)
      } else {
        this.getMaterialList()
      }
    },
    // 获取物料数据
    async getMaterialList(ev) {
      this.details = []
      if (ev && !ev.page) {
        this.details = ev
      }
      const DATA = {
        fnumber: '1-7',
        ...this.pagination,
        search: this.searCollData.concat(this.details)
      }
      const { data: RES } = await queryTBdMaterialList(DATA)
      this.materialTableData = RES.array.map(item => {
        item.srcList = [item.fimg, item.fworkImg, item.fworkImg1, item.fworkImg2, item.fworkImg]
        return (toMxAmina(item), Disable(item))
      })
      this.total = RES.total
    },
    // 多选
    selectionData(val) {
      this.delArr = []
      this.val = val
      this.val.forEach(res => {
        this.delArr.push({ fmaterialId: res.fmaterialId })
      })
    },
    // 自定义列表
    customHandle(ev) {
      this.tableHeaders = []
      if (ev.header) {
        ev.header.forEach(item => {
          this.tableHeader1.forEach(res => {
            if (res.label === item) {
              this.tableHeaders.push(res)
            }
          })
        })
        this.materialTableHeader = this.tableHeaders
      } else if (ev.fname === '缺省方案') {
        this.materialTableHeader = this.oldTabHeader
      } else {
        this.materialTableHeader = this.tableHeader1
      }
    }
  }
}
</script>

<style>
.content .el-dialog .el-dialog__body {
  text-align: center;
}
</style>
<style scoped lang="scss">
.mainPage {
  margin-top: 1.6vh;
}
.el-dialog::v-deep .el-dialog__body {
  text-align: center;
}
.content {
  @include listBom;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: #fff;
  .header {
    position: relative;
    .btn {
      transform: translateY(36%);
      margin-left: 450px !important;
    }
    .btn_spacing {
      transform: translateY(18%);
    }
  }
  .productImg {
    width: auto;
    max-width: 60px;
    max-height: 40px;
    margin: 0 5px;
    i {
      font-size: 16px;
    }
  }
  .el-dialog .el-dialog__body {
    text-align: center;
  }
  .image {
    max-height: 600px;
    max-width: 600px;
  }
}
</style>
